/**
 * MaterialsDialog
 */
 
 import eventHelper from "../../../util/EventHelper";

 var React = require("react");
 var tool = require("../../../util/tool");
 var consts = require("../../../util/consts");
 var dataProvider = require("../provider/dataProvider");
 var MaterialsDialog = React.createClass({
    getInitialProps: function (){
        return {
            root: {},
            data: {}
        }
    },
    getInitialState: function (){
        return {

        }
    },
    componentWillMount: function (){
        this.form = {};
        this.ThreedList = [];

        var widgets = dataProvider.widgets;
        widgets.forEach(function (widget){
            var data = $.extend(true, {}, widget);
            if (data.type == consts.WIDGET_TYPE.THREED){
                // 有播放动作或者贴图的才可选
                this.ThreedList.push(data);
            }
        }.bind(this));

        var data = this.props.data;
        if (data.action){
            this.form.model = data.action;
        }

        this.CONST = {
            MATERIAL_TYPE: {
                BASE: "base",
                LOOP: "loop"
            },
            LOOP_LIMIT: 10,
            CN_COUNT_MAPPING: {
                0: $._("One"),
                1: $._("Two"),
                2: $._("Threed"),
                3: $._("Four"),
                4: $._("Five"),
                5: $._("Six"),
                6: $._("Seven"),
                7: $._("Eight"),
                8: $._("Nine"),
                9: $._("Ten")
            }
        };
    },
    handleOnSelectThreed: function (type, param, materialType, index){
        var objEvent = arguments[arguments.length - 1];

        var widget = this.props.data, params;
        var element = $(objEvent.target), val = element.val();

        var select_material;

        if ("widget_id" === type){
            params = {
                widget_id: val
            };
        } else if("select_material" == type) {
            // base
            if (materialType === this.CONST.MATERIAL_TYPE.BASE){
                select_material = widget.action.select_material ? widget.action.select_material : {};
                select_material[param] = val;
                params = {
                    select_material: select_material
                };
            // extra
            } else if(materialType === this.CONST.MATERIAL_TYPE.EXTRA) {
                var select_materials = widget.action.select_materials;
                select_materials[index][param] = val;
                params = {
                    select_materials: select_materials
                };
            }
        } else if("looptype" === type) {
            var looptype = !widget.action.looptype ? 1 : 0;
            params = {
                looptype: looptype
            };
        }

        $.extend(widget.action, params);

        if (!widget.action.widget_id){
            delete widget.action.select_material;
            delete widget.action.select_materials;
            delete widget.action.select_animation;
            delete widget.action.select_animations;
        }
        if(!widget.action.select_animations){
            delete widget.action.select_animation;
        } else if(!widget.action.select_animations.length){
            delete widget.action.select_animation;
        }

        this.updateWidget(widget);
    },
    updateWidget: function (widget){
        var root = this.props.root;
        root.updateLocaleWidget(widget);
    },
    handleOnAddLoopMaterial: function (materials){
        var material = {};
        materials.forEach(function (item){
            material[item[0]] = "";
        });

        var widget = this.props.data;
        var select_materials = widget.action.select_materials || [];
        select_materials.push(material);

        widget.action.select_materials = select_materials;

        this.updateWidget(widget);
    },
    handleOnRemoveLoopMaterial: function (index){
        var widget = this.props.data;
        var select_materials = widget.action.select_materials || [];
        if (select_materials.length){
            select_materials.splice(index, 1);

            widget.action.select_materials = select_materials;

            this.updateWidget(widget);
        }
    },
    materialNodesCreator: function (materials, select_material, type, index){
        var titleNode = "";
        if (type === this.CONST.MATERIAL_TYPE.EXTRA){
            titleNode =
                <div className="loop_material_header">
                    <span>{$._('Loop switch')}{this.CONST.CN_COUNT_MAPPING[index]}</span>
                    <a href="javascript:;" onClick={this.handleOnRemoveLoopMaterial.bind(this, index)}>{$._("Delete")}</a>
                </div>
        }

        return (
            <div key={index} className="threed_Texture_default">
            {titleNode}
            {
                materials.map(function (u3d_material){
                    return (
                        <div key={u3d_material[0]} className="Texture_default_list">
                            <img src="/static/idealsee/images/new_editor/editor/Bitmap.png" width="20" />
                            <span>{u3d_material[0]}</span>
                            <select className="select_materials" data-value={u3d_material[0]} name="select_material" onChange={this.handleOnSelectThreed.bind(this, "select_material", u3d_material[0], type, index)} className="select-threed" value={ select_material ? select_material[u3d_material[0]] : "-1" }>
                                <option value="-1" key="please_choose">{$._('Please choose')}</option>
                                {
                                    u3d_material[1].map(function (u3d_name, index){
                                        return (
                                            <option key={index} value={u3d_name}>
                                                {u3d_name}
                                            </option>
                                        )
                                    })
                                }
                            </select>
                        </div>
                    )
                }.bind(this))
            }
            </div>
        )
    },
    handleOnSubmit: function (){
        var data = this.props.data;
        var root = this.props.root;
        var fromTemplate = this.props.fromTemplate;
        if(fromTemplate){
            root.updateSpecifyWidget(data);
        }
        root.closeDialog();
    },
    handleOnCloseDialog: function (){
        var root = this.props.root;
        root.closeDialog();
    },
    render: function (){
        var root = this.props.root,
            data = this.props.data;
        var rStyle = {
            position: "fixed",
            top: "50%",
            left: "50%",
            width: "400px",
            height: "auto",
            marginLeft: "-200px",
            marginTop: "-335px",
            display: "block",
            borderRadius: '5px',
        };
        var hasThreedNode = "";
        var widget = this.props.data;
        var form = this.form;
        form.model.select_materials = form.model.select_materials || [];

        // 获取当前选中模型
        var chooseThreed = null;
        this.ThreedList.forEach(function (threed){
            if (form.model.widget_id == threed.id){
                chooseThreed = threed;
            }
        });

        // 当前选中模型的数据
        var u3d_materials = (chooseThreed && chooseThreed.u3d_materials) ? chooseThreed.u3d_materials : [];

        // 当前组件选中贴图数据
        var select_materials = form.model.select_materials;

        if (this.ThreedList.length){
            hasThreedNode =
                <select name='widget_id' onChange={this.handleOnSelectThreed.bind(this,"widget_id")} className='select-threed' value={widget.action.widget_id}>
                    {
                        this.ThreedList.map(function(threed){
                            var fbx_name = threed.u3d_fbx_name || threed.html;
                            return(
                                <option value={threed.id} key={threed.id}>{fbx_name}</option>
                            )
                        }.bind(this))
                    }
                </select>
                // 添加循环切换按钮
                var addLoopMaterialNode = "";
                // 循环切换贴图节点
                var loopMaterialsNode = "";
                var MaterialsNode = "";
                if (u3d_materials.length){
                    MaterialsNode = this.materialNodesCreator(u3d_materials, form.model.select_material, this.CONST.MATERIAL_TYPE.BASE, 0);

                    // 限制循环切换个数
                    if (select_materials.length < this.CONST.LOOP_LIMIT){
                        addLoopMaterialNode =
                            <div className="add_loop_region">
                                <div className="add_loop_btn" onClick={this.handleOnAddLoopMaterial.bind(this, u3d_materials)}>
                                    <i></i>
                                    <span>{$._("Add loop switch")}</span>
                                </div>
                                <div className="add_loop_tip">
                                    {$._('Add after continuous click on the loop switch map')}
                                </div>
                            </div>
                    }

                    loopMaterialsNode =
                        select_materials.map(function (material, index){
                            return (
                                this.materialNodesCreator(u3d_materials, material, this.CONST.MATERIAL_TYPE.EXTRA, index)
                            )
                        }.bind(this))
                } else if(!u3d_materials.length && form.model.widget_id){
                    MaterialsNode =
                        <div className="threed_Texture_default">
                            <div className="no_default_sd">{$._('No textures in the model')}</div>
                        </div>
                }
        }
        return (
            <dialog ref="dialog" style={rStyle} className="btg-modal widget-form materialsDialog">
                <div className='form-horizontal'>
                    <div className="btg-modal-content location-region">
                        <div className="form-horizontal">
                            <div className="widget-form-title">
                                <label>{$._("Change model map")}</label>
                            </div>
                        </div>
                        <div className='select-container'>
                            <div className="select_3d">
                                <label>{$._('Model choose')}</label>
                                <select style={{display: this.ThreedList.length ? "none" : "inline-block"}}>
                                    <option>{$._('no model in this page')}</option>
                                </select>
                                {hasThreedNode}
                            </div>
                            {MaterialsNode}
                            {addLoopMaterialNode}
                            <div className='loop_threed_Texture'>
                                {loopMaterialsNode}
                            </div>

                        </div>
                        <div className="form-group buttons">
                            <button type="button" onClick={this.handleOnSubmit}>
                                <span>{$._("Submit")}</span>
                            </button>
                        </div>
                    </div>
                </div>
                <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
            </dialog>
        )
    }
 });

 module.exports = MaterialsDialog;
